<!-- src/components/business/CaptchaSection.vue -->
<template>
    <div class="captcha-section">
      <p class="captcha-description">为了确保操作安全，请输入下方验证码</p>
      <div class="captcha-wrapper">
        <el-input 
          :model-value="captchaValue"
          @update:model-value="handleInput"
          ref="captchaInputRef" 
          placeholder="请输入验证码" 
          size="large" 
          maxlength="4"
          class="captcha-input" 
          @keyup.enter="handleConfirm"
        >
          <template #prefix>
            <i class="el-icon-key" />
          </template>
        </el-input>
        <div class="captcha-image-wrapper" @click="handleRefresh">
          <img :src="captchaImageUrl" alt="验证码" class="captcha-image" @error="handleError" />
          <div v-if="captchaLoading" class="loading-mask">
            <i class="el-icon-loading"></i>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  import type { InputInstance } from 'element-plus'
  
  interface Props {
    captchaImageUrl: string
    captchaLoading: boolean
    captchaValue: string
  }
  
  interface Emits {
    (e: 'update:captcha', value: string): void
    (e: 'refresh'): void
    (e: 'confirm'): void
  }
  
  defineProps<Props>()
  const emit = defineEmits<Emits>()
  
  const captchaInputRef = ref<InputInstance>()
  
  const handleInput = (value: string): void => {
    emit('update:captcha', value)
  }
  
  const handleRefresh = (): void => {
    emit('refresh')
  }
  
  const handleConfirm = (): void => {
    emit('confirm')
  }
  
  const handleError = (): void => {
    // 可以添加错误处理逻辑
  }
  </script>
  
  <style lang="scss" scoped>
  .captcha-section {
    .captcha-description {
      margin: 0 0 15px 0;
      text-align: center;
      color: #666;
      font-size: 14px;
    }
  
    .captcha-wrapper {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
  
      .captcha-input {
        flex: 1;
      }
  
      .captcha-image-wrapper {
        position: relative;
        width: 120px;
        height: 40px;
        cursor: pointer;
  
        .captcha-image {
          width: 100%;
          height: 100%;
          border: 1px solid #dcdfe6;
          border-radius: 4px;
        }
  
        .loading-mask {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(255, 255, 255, 0.8);
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 4px;
  
          i {
            font-size: 20px;
            color: #999;
          }
        }
      }
    }
  }
  </style>